<template>
    <el-drawer v-model="drawerShow" :before-close="close" :with-header="false" size="35%">
    <div class="record-container">
      <div style="font-weight: 700;font-size: 15px;display: flex;align-items: center;">
          <span style="width:3px;height:14px;background-color: #2158F3;margin-right: 5px;"> &nbsp</span>
          <span>通知消息</span> 
      </div>
        <div class="main-cen">
          <div class="main-cen-tabs">
            <div class="list-item">
              <div class="liet" :class="queryParams.status==5 ? 'info':''" @click="tabsStus(5)">未读</div>  
              <div class="liet" :class="queryParams.status==10 ? 'info':''" @click="tabsStus(10)">已读</div> 
            </div>
          </div>
          <div style="display: flex;justify-content: flex-end;" v-if=" queryParams.status==5">
            <el-button type="primary" @click="allStus" size="small" plain round>全部已读</el-button>

          </div>
          <!-- <el-tabs v-model="queryParams.businessType" class="demo-tabs" @tab-change="handleClick">
            <el-tab-pane v-for="item in tabsList" :key="item.value" :label="item.label" :name="item.value"></el-tab-pane>
          </el-tabs> -->
          <div class="main-list" v-if="dataList.length>0">
            <div class="list-info" v-for="item in dataList" :key="item.id" @click.stop="msgItem(item)">
              <div class="list-info-fl">
                <div class="list-info-fl-title"><span class="redH" v-if="item.status==5"></span>{{ item.msgTitle }}</div>
                <div class="list-info-fl-time"> {{formatDate(item.createTime)}}</div>
              </div>
              <div class="list-info-fr">
                <el-icon @click.stop="deleteBox(item)"><Delete /></el-icon>  
              </div>
            </div>
          </div>
          <div v-else style="text-align: center;margin-top: 150px;"> 暂无数据</div>
        </div>
       <msggesInfo ref="msggesInfoRef" @updateMode="getTableData" @listMode="close"></msggesInfo>
    </div>
  </el-drawer>
</template>
<script setup lang="ts">
import { onActivated, ref,nextTick } from 'vue'
import { getMessagesList,setAllRead,deleteIds } from '@/api/sysMessag/index'
import { formatDate } from '@/utils'
import { ElMessage, ElMessageBox } from 'element-plus'
import msggesInfo from '@/components/magges/indexInfo'
import usePermissionStore from '@/store/modules/permission'
const permissionStore = usePermissionStore()
const routList=ref(permissionStore.routesAll)
const openBox = (info) => {
    drawerShow.value=true
    // queryParams.value.beginCreateDate = getDateBeforeOrAfter(-3).toISOString();
    // queryParams.value.endCreateDate = new Date().toISOString();
  
    getTableData()

}
const tabsList=ref([
  {
    label:'全部',
    value:''
  },{
    label:'集装箱公司',
    value:10
  },{
    label:'货代',
    value:15
  },{
    label:'箱贸易',
    value:20
  },{
    label:'车队',
    value:25
  },{
    label:'系统',
    value:5
  }
])
const queryParams=ref({
  // businessType:'',
  msgType:10,
  beginCreateDate:'',
  endCreateDate:'',
  status:5,
})
const drawerShow=ref(false)
const dataList=ref([])
// 获取表格数据
function getTableData() {
  // 列表
//获取一级目录
  let companyRole = localStorage.getItem('companyRole') || routList.value[0].companyRole
  if(companyRole=='zx'){
    queryParams.value.msgType=15
  }else if(companyRole=='putBox'){
    queryParams.value.msgType=10
  }else if(companyRole=='cars'){
    queryParams.value.msgType=20
  }else if(companyRole=='yard'){
    queryParams.value.msgType=25
  }
  getMessagesList(JSON.stringify(queryParams.value)).then((res: any) => {
    dataList.value=res.data;
  }).catch((err) => {
    console.log(err)
  })
}
//tabs切换 列表字段是否显示
const handleClick=(val)=>{
  queryParams.value.businessType=val
  getTableData()
}
function getDateBeforeOrAfter(days) {
    const date = new Date();
    date.setDate(date.getDate() + days); // 向前或向后移动days天
    return date;
}
//已读未读
const tabsStus=(val)=>{
  queryParams.value.status=val
  getTableData()
}
//全部已读
const allStus=()=>{
  let data={
      msgType:10
  }
    let companyRole = localStorage.getItem('companyRole') || routList.value[0].companyRole
  if(companyRole=='zx'){
    data.msgType=15
  }else if(companyRole=='putBox'){
    data.msgType=10
  }else if(companyRole=='cars'){
    data.msgType=20
  }else if(companyRole=='yard'){
    data.msgType=25
  }

    ElMessageBox.confirm('确定要全部已读吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
      }).then(() => {
        setAllRead(data).then((res: any) => {
          ElMessage.success('操作成功！')
          getTableData()
        })
    }).catch((err) => {
      console.log(err)
    })
  
}
//删除操作
const deleteBox = (row) => {
  ElMessageBox.confirm(
    '您确定要删除所勾选的消息吗？',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      let data=[]
      data.push(row.id)
      // if(row?.id){
      //   //单独删除
      //   data.push(row.id)
      // }else{
      //   //批量
      //   data=row
      // }
      deleteIds(data).then((res) => {
        ElMessage.success('删除成功')
        getTableData()
      })
    })
}
const msggesInfoRef=ref()
const msgItem=(item)=>{
  msggesInfoRef.value.openBox(item.id)

}
const emits = defineEmits(['updateMode'])

const close=()=>{
    emits('updateMode');
  drawerShow.value=false
}
defineExpose({
    openBox
})
</script>
<style lang="scss" scoped>
.main-cen-tabs{
  display: flex;
  justify-content: center;
  align-content: center;
  margin-bottom: 10px;
}
.list-item{
  display: flex;
  border: 1px solid #eee;

}
.liet{
  padding: 5px 20px;
  cursor: pointer;
}
.info{
  color: #2158F3;
  background: #7e8db566;
}
.list-info{
  display: flex;
  align-items: center;
  margin-top: 10px;
  justify-content: space-between;
}
.list-info-fl-time{
   color: #666;
  margin-top: 5px;
  font-size: 14px;
}
.list-info-fr{
  
}
.redH{
  display:inline-block;
  margin-right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f00;
}
</style>
